<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" :get-container="getContainer" @open="handleSearch">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-row>
        <van-nav-bar
          title="选择排产信息"
          left-text="返回"
          :right-text="multiple?selectAllFlag?'取消全选':'全选':''"
          left-arrow
          @click-left="$emit('close')"
          @click-right="handleSelectAll"
        />

        <van-search v-model="page.query.keyword" show-action placeholder="请输入关键字查询">
          <template #action>
            <div @click="handleSearch">搜索</div>
          </template>
        </van-search>
        <van-dropdown-menu :close-on-click-outside="false">
          <van-dropdown-item v-model="page.query.priority" :options="priorityOptions" @change="handleSearch" />
          <van-dropdown-item v-model="page.query.sourceType" :options="sourceTypeOptions" @change="handleSearch" />
          <van-dropdown-item v-model="page.query.sortType" :options="sortTypeOptions" @change="handleSearch" />
        </van-dropdown-menu>
        <van-list
          v-model="tableLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="doPage"
        >
          <van-checkbox-group v-if="multiple" v-model="produceIds">
            <van-cell-group>
              <van-cell v-for="(item,index) in tableData" :key="index" clickable @click="toggleCheckbox(item,index)">
                <template #right-icon>
                  <van-checkbox ref="checkboxes" :name="item.id" :disabled="getDisabled(item)" />
                </template>
                <template #title>
                  <div class="title">
                    <div v-html="highlightText(item.title, page.query.keyword)" />
                  </div>
                  <div v-if="item.remainingQuantity<=120" class="title red right">
                    <div v-html="highlightText(item.remaining, page.query.keyword)" />
                  </div>
                  <div v-else class="title right primary">
                    <div v-html="highlightText(item.remaining, page.query.keyword)" />
                  </div>
                </template>
                <template #label>
                  <div class="desc" />
                  <div v-html="highlightText(item.productAttribute, page.query.keyword)" />
                  <div class="desc">
                    <div v-html="highlightText(item.produceDate, page.query.keyword)" />
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
          <van-radio-group v-else v-model="produceId">
            <van-cell v-for="(item,index) in tableData" :key="index" @click="handleChangeProduce(item)">
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
              <template #title>
                <div class="title">
                  <div v-html="highlightText(item.title, page.query.keyword)" />
                </div>
                <div v-if="item.remainingQuantity<=120" class="title red right">
                  <div v-html="highlightText(item.remaining, page.query.keyword)" />
                </div>
                <div v-else class="title right primary">
                  <div v-html="highlightText(item.remaining, page.query.keyword)" />
                </div>
              </template>
              <template #label>
                <div class="desc" />
                <div v-html="highlightText(item.productAttribute, page.query.keyword)" />
                <div class="desc">
                  <div v-html="highlightText(item.produceDate, page.query.keyword)" />
                </div>
              </template>
            </van-cell>
          </van-radio-group>
        </van-list>
      </van-row>
    </van-pull-refresh>
    <div class="bottom_button">
      <van-button type="danger" block round @click="confirmSelect">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import { selectProduceRegistrationPage } from '@/api/produce'
import { highlightText } from '@/utils/util'

export default {
  name: 'SelectProduce',
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    disableIds: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      show: this.visible,
      tableLoading: false,
      finished: false,
      tableData: [],
      refreshing: false,
      priorityOptions: [
        { text: '全部', value: '-1' },
        { text: '普通', value: '0' },
        { text: '加急', value: '1' }
      ],
      sortTypeOptions: [
        { text: '默认排序', value: '-1' },
        { text: '余数最少', value: '0' },
        { text: '余数最多', value: '1' }
      ],
      sourceTypeOptions: [
        { text: '全部', value: '-1' },
        { text: '销售订单', value: '0' },
        { text: '库存备货', value: '1' }
      ],
      page: {
        page: 1,
        size: 10,
        total: 0,
        query: {
          keyword: '',
          priority: '-1',
          sortType: '-1',
          produceState: '-1',
          sourceType: '-1'
        }
      },
      produceId: '',
      produceIds: [],
      selectAllFlag: false
    }
  },
  methods: {
    highlightText,
    doPage() {
      this.tableLoading = true
      selectProduceRegistrationPage(this.page).then(resp => {
        if (resp.success) {
          if (this.refreshing) {
            this.tableData = []
            this.refreshing = false
          }
          this.tableData = [...this.tableData, ...resp.data.records]
          this.page.total = resp.data.total
          this.finished = this.tableData.length >= resp.data.total
          for (let i = 0; i < resp.data.records.length; i++) {
            var tableDatum = resp.data.records[i]
            tableDatum.title = tableDatum.customerName + '*' + tableDatum.productInfo.moldName + '*' + tableDatum.quantity + tableDatum.productInfo.unit
            tableDatum.remaining = '余数:' + tableDatum.remainingQuantity + tableDatum.productInfo.unit
            tableDatum.productAttribute =
                '颜色:' + tableDatum.productInfo.color +
                ',材质:' + tableDatum.productInfo.material +
                ',尺码:' + tableDatum.productInfo.size +
                ',长度:' + tableDatum.productInfo.length
          }
        }
      }).catch(() => {
        this.finished = true
      }).finally(() => {
        this.tableLoading = false
        this.page.page++
      })
    },
    onRefresh() {
      this.page.page = 1
      this.doPage()
    },
    handleSearch() {
      this.tableData = []
      this.page.page = 1
      this.finished = false
      this.doPage()
    },
    handleChangeProduce(row) {
      this.produceId = row.id
    },
    confirmSelect() {
      if (this.multiple) {
        const dataList = this.tableData.filter(e => this.produceIds.indexOf(e.id) !== -1)
        this.tableData = []
        this.produceIds = []
        this.$emit('close', dataList)
      } else {
        const data = this.tableData.filter(e => this.produceId.indexOf(e.id) !== -1)[0]
        this.produceId = ''
        this.$emit('close', data)
      }
    },
    getContainer() {
      return document.body
    },
    getDisabled(row) {
      const disabled = this.disableIds.indexOf(row.id) !== -1
      row.disabled = disabled
      return disabled
    },
    toggleCheckbox(item, index) {
      if (!item.disabled) {
        this.$refs.checkboxes[index].toggle()
      }
    },
    handleSelectAll() {
      if (!this.multiple) {
        return
      }
      this.produceIds = []
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.selectAllFlag) {
          this.$refs.checkboxes[i].toggle(false)
        } else {
          const item = this.tableData[i]
          if (!item.disabled) {
            this.produceIds.push(item.id)
            this.$refs.checkboxes[i].toggle(true)
          }
        }
      }
      this.selectAllFlag = !this.selectAllFlag
    }
  }
}
</script>

<style scoped>

</style>
